<!--
 * @description  : 案件-案件列表
 * @descriptionDetail: 案件-案件列表
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-07-15 15:43:11
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
        :is-white="false"
        :title="navTitle"
        :custom-back="goBack"
        style="z-index: 9999"
    >
      <u-icon name="list" color="#FFF" size="38" style="margin: 0 24rpx 0 6rpx" @tap="selectCase"></u-icon>
    </theme-navbar>
    <!-- #endif -->

    <!-- #ifdef H5-WECHAT || H5-EMP -->
    <fab-button :content="fContent" @fabtrigger="fabtrigger" />
    <!-- #endif -->
    <view class="content">
      <!-- 正文内容, 绝对定位处理距离顶部高度 -->
      <view class="case-search-lay" :style="{'top': isHideNav ? 0 : '44px'}">
        <u-search
            class="case-search"
            shape="round"
            :clearabled="true"
            :showAction="true"
            :animation="true"
            actionText="确定"
            v-model="keyword"
            @custom="searchClick"
        ></u-search>
      </view>

      <list-view
          :i="0"
          :index="0"
          :top="getListViewTop()"
          :bottom="getListViewBottom()"
          :load-data="myLoadData"
          :init-load="false"
          :noMoreDataTipShow="false"
          ref="mescrollItem0"
      >

        <template slot-scope="d">
         <u-card :showFoot="false" padding="20" :showHead="false" :border="false" margin="20rpx" border-radius="30">
            <case-info-item slot="body" class="n-lay" :seal-info="d.data" :flag="true"></case-info-item>
          </u-card>

        </template>

      </list-view>

    </view>

    <u-popup v-model="caseShow" width="80%" mode="right">
      <view class="cearch_title">
        查询条件
      </view>
      <u-form :model="orgForm" label-position="top" label-width="auto" style="padding: 80rpx 32rpx 0 32rpx" ref="uForm">
        <u-form-item label="案件类型:" prop="handleProc">
          <dic-input
              :keyWord="$u.dic.DIC_KEYS.C_CASE_TYPE"
              :dicCode="orgForm.handleProc"
              :border="ifborder"
              inputAlign="left"
              type="select"
              :select-open="dicSelectOpen('handleProc',$u.dic.DIC_KEYS.C_CASE_TYPE)"
              placeholder="请选择"
              v-model="orgForm.handleProcName"
              @changeInputModelData="(name)=>{$set(orgForm, 'handleProcName', name)}"
              @click="showDic($u.dic.DIC_KEYS.C_CASE_TYPE,orgForm.handleProc,'handleProc')"
          />
        </u-form-item>
      </u-form>
      <view class="submit-btns btn-other-cls">
        <u-button plain class="del" type="primary" @click="close">
          重置
        </u-button>
        <u-button class="mit" type="primary" @click="selectChange">
          确定
        </u-button>
      </view>
    </u-popup>
    <!-- 下拉选择用 -->
    <dic-choice
        :keyWord="dicKeyWords"
        :currentSelect="dicCurrentSelect"
        v-model="dicShow"
        @confirm="selectDicConfirm"
    ></dic-choice>
  </view>
</template>

<script>
import listView from '@/components/list_view.vue';
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
import CaseInfoItem from './partInfoItem.vue';
import caseService from '@/service/case/case.service';
import checkService from '@/service/check/check.service';
import DicInput from '@/components/dic_input.vue';
import DicChoice from '@/components/dic_choice.vue';
import {
  CASE_TYPE,
} from '@/service/case/mapping/index.js';
import {
  ifSimpleCase,
} from '@/config/setting.config';
import fabButton from '@/components/uni-fab.vue';

export default {
  components: {
    listView,
    'case-info-item': CaseInfoItem,
    DicInput,
    DicChoice,
    fabButton
  },
  mixins: [MescrollMoreMixin, ],
  data() {
    return {
      userCode: '',
      videoId: '', // 视频id
      keyword: '',
      requestParam: {
        page: 1,
        limit: 10,
      },
      defaultCaseClue: {},
      isStatus: false, // 控制一般案件和简易案件保存后 返回刷新
      caseShow: false,
      orgForm: {},
      // dic_select 是否显示
      dicShow: false,
      // dic 关键字
      dicKeyWords: '',
      // dic 当前选择项
      dicCurrentSelect: '',
      dicType: '',
      // 输入框是否有border
      ifborder: false,
      fContent: [{
        iconPath: require('@/static/sou.png'),
        selectedIconPath: require('@/static/sou.png'),
        text: '筛选',
        active: false,
      }],
      ifSimpleCase: '',
    };
  },
  created() {
    this.ifSimpleCase = ifSimpleCase;
  },
  mounted() {
    this.setRightBtns();
    this.userCode = this.$storage.get(this.$rp.common.USER).user.personCode;
    this.init();
    this.setRightBtns()
    // 案件记录仪
    // this.initVideo()
  },
  onShow() {
    if (this.isStatus) {
      this.getMescroll(this.tabIndex).triggerDownScroll();
      this.isStatus = false;
    }
  },
  methods: {
    setRightBtns() {
      // #ifdef H5-DINGDING
      this.$deviceApi.setRight('筛选', () => {
        this.selectCase();
        this.setRightBtns();
      }, true, true);
      // #endif
    },
    fabtrigger(btn) {
      if (btn.index == 0) {
        this.selectCase();
      }
    },
    init() {
      caseService
          .casePropertyList()
          .then((res) => {
            this.$modal.hideLoading();
            if (!res.success) {
              return;
            }
            if (res.data && res.data.length > 0) {
              this.defaultCaseClue = res.data[0];
            }
          })
          .catch((err) => {
            console.log('查询失败:' + err);
          });
    },
    initVideo() {
      let self = this;
      let vStatus1 = document.getElementById('v_status1');
      let vStatus2 = document.getElementById('v_status2');
      window.openVideo = function() {
        vStatus1.style.display = 'none';
        vStatus2.style.display = 'block';
        self.openRecord();
      };
      window.closeVideo = function() {
        vStatus1.style.display = 'block';
        vStatus2.style.display = 'none';
        self.endClick();
      };
    },
    // 打开视频录像
    openRecord() {
      // 判断是否在录制
      checkService
          .getUserLiveList({
            userName: this.userCode,
            page: 1,
            pageSize: 10,
          })
          .then((res) => {
            if (res.data.length == 0) {
              // 未录制 则开启录制
              let timer = new Date();
              let startTime = this.$u.timeFormat(timer, 'yyyy-mm-dd hh:MM:ss');
              checkService.saveBusTimeLine({
                // bizId:'', // 文书id
                startTime: startTime,
              });
            }
            checkService
                .openCamera({
                  userName: this.userCode,
                })
                .then((res) => {
                  this.videoId = res.bean;
                  this.state = true;
                  if (res.success) {
                    console.log('开启录制成功');
                    // this.saveVideoBussRef();
                  } else {
                    this.$modal.alert('开启录制失败请检查设备是否开启或登录');
                  }
                });
          });
    },
    // 绑定视频与业务关系
    saveVideoBussRef() {
      checkService
          .saveVideoBussRef({
            videoId: this.videoId,
            userName: this.userCode,
          })
          .then((it) => {
            if (it.success) {
              console.log('绑定业务成功');
            } else {
              console.log(it.msg);
            }
          });
    },
    selectCase() {
      this.caseShow = true;
    },
    dicSelectOpen(type, keyWords) {
      if (type == this.dicType) {
        if (this.dicKeyWords == keyWords && this.dicShow) {
          return true;
        }
        return false;
      }
    },
    showDic(key, cur, type) {
      if (this.dicShow) return;
      this.dicKeyWords = key;
      this.dicCurrentSelect = cur;
      this.dicShow = true;
      this.dicType = type;
    },
    selectDicConfirm(e) {
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.C_CASE_TYPE) {
        // 未办证原因
        this.orgForm.handleProcName = e[0].label;
        this.orgForm.handleProc = e[0].extra.bcbCode;
      }
    },
    close() {
      this.orgForm = {};
    },
    selectChange() {
      this.caseShow = false;
      // this.searchObj = this.orgForm;
      this.getMescroll(this.tabIndex).triggerDownScroll();
    },
    // 关闭录像
    endClick() {
      checkService
          .getUserLiveList({
            userName: this.userCode,
            page: 1,
            pageSize: 10,
          })
          .then((dr) => {
            if (dr.data.length != 0) {
              let timer = new Date();
              let endTime = this.$u.timeFormat(timer, 'yyyy-mm-dd hh:MM:ss');
              checkService.saveBusTimeLine({
                // bizId:‘’, // 文书id
                endTime: endTime,
              });
            }
            checkService
                .closeCamera({
                  userName: this.userCode,
                })
                .then((res) => {
                  if (res.success) {
                    this.state = false;
                  }
                });
          });
    },
    //  获取列表距离顶部的高度
    getListViewTop() {
      let p = this.$u.sys().statusBarHeight + uni.upx2px(104) + 'px';
      return p;
    },
    getListViewBottom() {
      return uni.upx2px(120) + 5;
    },
    searchClick: function() {
      this.getMescroll(this.tabIndex).triggerDownScroll();
    },
    // 案件查询数据
    myLoadData(page) {
      let self = this;
      this.requestParam.page = page.num;
      this.requestParam.limit = page.size;
      this.requestParam.handleProc = this.keyword;
     // this.requestParam.handleProc = this.orgForm.handleProc || '';
      return new Promise((resolve) => {
        caseService.getIllegalRecords(self.requestParam).then((res) => {
              if (res.success) {
                let arr = res.data;
                arr.forEach((itm) => {
                  if (itm.handleProc == CASE_TYPE.SIMPLE && this.$u.test.isEmpty(itm.caseOfAction)) {
                    itm.caseOfAction = this.defaultCaseClue.caseProperty;
                  }
                  self.$set(itm, 'show', false);
                });
                resolve({
                  data: {
                    list: arr,
                    totalCount: res.count,
                  },
                });
              } else {
                self.$modal.alert(res.msg);
                resolve({
                  data: {
                    list: [],
                    totalCount: 0,
                  },
                });
              }
            })
            .catch((err) => {
              self.$modal.alert(err);
              resolve({
                data: {
                  list: [],
                  totalCount: 0,
                },
              });
            });
      });
    },
    // 简易案件
    mySimpleCase() {
      this.isStatus = true;
      this.setRouteParam({
        initQueryData: {},
      });
      this.$u.route({
        url: '/pages/case/components/caseFilingLink',
        type: 'to',
        params: {
          caseType: CASE_TYPE.SIMPLE,
        },
      });
    },
    // 一般案件
    myGeneralCase() {
      this.isStatus = true;
      this.setRouteParam({
        initQueryData: {},
      });
      this.$u.route({
        url: '/pages/case/components/caseFilingLink',
        type: 'to',
        params: {
          caseType: CASE_TYPE.NORMAL,
        },
      });
    }
  },
};
</script>

<style lang="scss" scoped>
@import '../case_common.scss';

.page {
  padding: 0;
  //padding-bottom: 50px;
}

.content {
  background-color: #f3f4f6;
}

.cearch_title {
  background-color: #f3f4f5;
  width: 100%;
  height: 82rpx;
  font-size: 32rpx;
  font-weight: 600;
  padding: 22rpx 0 21rpx 32rpx;
  z-index: 999;
  position: fixed;
}

.n-lay {
  width: 100%;
  padding: 15rpx;
}

.case-search-lay {
  background-color: #fff;
  position: fixed;
  top: 0px;
  z-index: 999;
  width: 100%;
  padding: $cm-search-padding-row $cm-search-padding-column;
}

.mc-divider {
  width: 100%;
  height: 10px;
  background-color: $uni-bg-color-grey;
}

.case-search {
  // margin-bottom: 20rpx !important;
}

.tabs-bottom {
  border-bottom: 2rpx solid $border-color-dark;
}

.message-box {
  color: $u-type-primary !important;
}

.mescroll {
  margin-bottom: 15px;
}

.tabsBottom {}

.nav-right-icon {
  margin-right: 30rpx;
  font-size: 0.8rem;
  color: $u-type-primary;
}

.p-item {
  margin: 5px 0px;

  .icon {
    color: #666;
  }

  .text {
    margin-left: 5px;
    color: #333;
  }
}

.list {
  width: 100%;
  height: auto;
  background-color: $uni-bg-color;
  //padding: 40rpx 30rpx 30rpx;
}

.img-size {
  width: 32rpx;
  height: 36rpx;
  vertical-align: middle;
}

.title-text {
  vertical-align: middle;
  font-weight: 600;
  font-size: 36rpx;
  margin-left: 20rpx;
}

.top-part {
  display: flex;
  justify-content: space-between;
}

.middle-btns {
  display: inline-block;
  width: auto;
  margin: 16rpx 4rpx;
  pointer-events: none;
  background-color: $uni-bg-color-grey;
  background-color: $u-type-info-light;
  border-color: $u-type-info-light;
}

.item-reason {
  color: $uni-text-color;
  font-size: 28rpx;
  padding-bottom: 8px;
  font-family: '微软雅黑', sans-serif;
  :nth-child(n+1){
    margin-top: 20rpx;
  }
  uni-text{
    color: $cm-form-right-icon-color;
  }
}

.item-time {
  color: $u-type-info-dark;
  font-size: 26rpx;
  font-family: '微软雅黑', sans-serif;
}

.part-right {
  font-size: 30rpx;
  font-weight: 600;
  color: $u-type-warning;
}
.part-right-type{
  font-size: 30rpx;
  font-weight: 400;
  margin-top: 20rpx;
  color: $font-color-spec;
  flex-shrink: 0;
}
.part-right-quick{
  color: white;
  padding: 5rpx 10rpx;
  width: 50rpx;
  margin-left: 15rpx;
  border-radius: 50%;
  text-align: center;
  background-color: $u-type-error;
}

.addr-bt{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.addr-lay{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-grow: 1;
  align-items: top;
  margin: 16rpx 0;
  font-size: 24rpx;
  :nth-child(n){
    margin: 5rpx 0;
  }
  :last-child{
    margin-left: 16rpx;
  }
}
</style>
